検証: テロメアの仕様調査20230629
現時点でのScrapboxのテロメアの仕様(2023/06/29)
本文の一行分のhtml
telomere-borderクラスにstyleが直接埋め込まれているので、幅などをいじるにはこれを上書きすればよさそう
code:html
<div class="line section-X" id="L(略)" style="">
<div class="telomere">
<div class="telomere-border" style="border-width: 0px 0px 0px Ypx; width: 20px;">
</div>
</div>
<span class="text"><!-- この中は本文のテキスト --></span>
</div>
Default Lightテーマのcss(2023/06/29)
テロメアの色関係部分
code:app.css
.line .telomere .telomere-border {
(略)
border-color: var(--telomere-border, #eaebeb);
}
.line .telomere .telomere-border.unread:not(.updated-after-load) {
border-color: var(--telomere-unread, #7fca8f)
}
.line .telomere .telomere-border.updated-after-load {
border-color: var(--telomere-updated, #47ba5f)
}
.line .telomere .telomere-border.will-delete-next {
border-color: #fd7373
}
telomere-borderクラスのborder-widthで太さを管理している
border-widthは1pxから10pxからなる
書き始めた時は10px
時間がたつと減っていき、とても古くなると1pxになる
多分1pxより下はないんじゃないか
テロメアが減るタイミング
telomere-borderに併記される可能性のあるクラスは多分、以下の4パターン(色の例えはDefault Lightテーマの場合)
1. telomere-border unread updated-after-load
緑のテロメア
自分が新しく書いた、もしくは今自分がいるページに他ユーザーが新しく書いた？
2. telomere-border unread
薄い緑のテロメア
未読
クラス名もそのまま
基本的に他ユーザーが更新した場所
3. telomere-border will-delete-next
オレンジっぽいテロメア
Page history専用？
それ以外に出現する？
4. telomere-border
グレーのテロメア
既読